<template>
	<div class='header'>
<div></div>
<div>
<div class="buttom-two"><div class="items">酒店</div><div class="items">机票</div><div class="items">公寓</div>
<div class="items" @click="push">{{selectshow  ? "展开" :"团购"}}</div>
</div>
<div v-if="!selectshow">
<div class="buttom-two"><div class="items">火车</div><div class="items">景点</div><div class="items">公寓</div><div class="items">度假</div></div>
<div class="buttom-two"><div class="items">攻略</div><div class="items">旅途</div><div class="items">车车</div><div class="items">当地</div></div>
<div class="buttom-two"><div  @click="pull" class="items-pull">收起</div></div>
</div>
<div class="buttom-one buttom-adds"><div class="buttom-info">登录</div><div class="buttom-info">我的订单</div><div class="buttom-info">最近浏览</div><div class="buttom-info">关于我们</div></div>
<div class="buttom-one"><div class="types">触屏版</div><div class="types">电脑版</div></div>
<div class="bottoms">
    CP备05021087
</div>
</div>
	</div>
</template>
<script type="text/javascript">
export default {
	data(){
          return {            
             selectshow:true
          }
      },
	methods:{
		push(){
			this.selectshow=false;
		},
		pull(){
             this.selectshow=true;
		}
	}
}
</script>
<style scoped lang='stylus'>
@import '~css/var.styl'
.buttom-one{
    display : flex;
}
.bottoms{
	color: #9e9e9e;
    text-align: center;
    font-size: 14px;
    padding: 10px;
}
.types{
    font-size: 14px;
    margin-left: 100px;
    margin-top: 11px;
}
.buttom-two{
    display : flex;
	padding-left: 30px;
    padding-right: 30px;
}
.buttom-info{
	    color: #25a4bb;
    font-size: 14px;
    line-height: 39px;
	 margin: 0 auto;
}
.buttom-adds{
	border-bottom: 1px solid #cacaca;
}
.items{
	color: #9e9e9e;
   margin: 0 auto;
    border-bottom: 1px solid #acacac;
    font-size: 12px;
    margin-top: 10px;
}
.items-pull{
	color: #9e9e9e;
    margin-top: 10px;
    border-bottom: 1px solid #acacac;
    font-size: 12px;
    position: relative;
    left: 84%;
}
</style>